<template>
  <a-modal
      title="表格项设置"
      width="30%"
      v-model:visible="visible"
      :footer="null"
  >
    <a-table
        :columns="columns"
        :rowKey="row => row.%IsKey%"
        :dataSource="dataSource"
        :pagination="false"
        :bordered="false"
        size="small"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key == 'show'">
          <a-checkbox v-model:checked="record.show"/>
        </template>
      </template>
    </a-table>
    <a-row :gutter="24" justify="center" style="margin-top: 16px">
      <a-col :span="14">
        <a-button @click="()=>{visible=false}">取消</a-button>
        <a-divider type="vertical"/>
        <a-button type="dashed" @click="handleReset">重置</a-button>
        <a-divider type="vertical"/>
        <a-button type="primary" @click="onFinish">确定</a-button>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script setup>
import {ref} from 'vue'
import {columns as settColumns} from '../ranks.js'

const visible = ref(false)
const dataSource = ref([])
const columns = ref([
  {title: '列名', dataIndex: 'title'},
  {title: '是否展示', dataIndex: 'show', key: 'show'}
])

function openItem() {
  const localTable = localStorage.getItem("%entityName%")
  visible.value = true
  if (localTable) {
    dataSource.value = JSON.parse(localTable)
  } else {
    settColumns.value.map(v => {
      dataSource.value.push({
        ...v,
        field: v.dataIndex,
        show: true,
        title: v.title
      })
    })
  }
}

defineExpose({openItem})

function handleReset() {
  localStorage.removeItem("%entityName%")
  dataSource.value = dataSource.value.map(v => {
    return {...v, show: true}
  })
}
const emit = defineEmits(['emitColumns'])
function onFinish() {
  localStorage.setItem("%entityName%", JSON.stringify(dataSource.value))
  emit('emitColumns',dataSource.value)
  visible.value = false
}
</script>

<style scoped>

</style>